<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery中使用AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
    <h1>JQuery中使用AJAX</h1>
    <input type="button" value="发送请求get" onclick="test_get()">
    <input type="button" value="发送请求post" onclick="test_post()"><br>
    <input type="button" value="发送请求get_args_str" onclick="test_get_args_str()">
    <input type="button" value="发送请求get_args_json" onclick="test_get_args_json()"><br>
    <input type="button" value="发送请求post_args_str" onclick="test_post_args_str()">
    <input type="button" value="发送请求post_args_json" onclick="test_post_args_json()">
    <input type="button" value="发送请求post_args_json2" onclick="test_post_args_json2()"><br>
    <input type="button" value="发送请求beforSend" onclick="test_beforsend()"><br>

    <script>
        function test_get(){
            $.ajax({
                type:'get',
                url:'http://httpbin.org/get',
                success:(data)=>{
                    console.log(data)
                }
            })
        }
        function test_post(){
            $.ajax({
                type:'post',
                url:'http://httpbin.org/post',
                success:(data)=>{
                    console.log(data)
                }
            })
        }
        function test_get_args_str(){
            $.ajax({
                type:'get',
                url:'http://httpbin.org/get',
                data:'name=sxt&pwd=123',
                success:(data)=>{
                    console.log(data)
                }
            }) 
        }
        function test_get_args_json(){
            $.ajax({
                type:'get',
                url:'http://httpbin.org/get',
                data:{"name":"sxt","pwd":123},
                success:(data)=>{
                    console.log(data)
                }
            }) 
        }
        function test_post_args_str(){
            $.ajax({
                type:'post',
                url:'http://httpbin.org/post',
                data:'name=sxt&pwd=123',
                success:(data)=>{
                    console.log(data)
                }
            }) 
        }
        function test_post_args_json(){
            $.ajax({
                type:'post',
                url:'http://httpbin.org/post',
                data:{"name":"sxt","pwd":123},
                success:(data)=>{
                    console.log(data)
                }
            }) 
        }
        function test_post_args_json2(){
            $.ajax({
                type:'post',
                url:'http://httpbin.org/post',
                data:{"name":"sxt", "pwd":123},

                // 设置请求的参数为json
                contentType:'application/json',
                success:(data)=>{
                    console.log(data)
                }
            }) 
        }
        function test_beforsend(){
            $.ajax({
                type:'post',
                url:'http://httpbin.org/post',
                data:{"name":"sxt", "pwd":123},

                // 设置请求的参数为json
                contentType:'application/json',

                success:(data)=>{
                    console.log(data)
                },

                beforeSend:()=>{
                    console.log('这个是发送请求之前处理的内容')

                    // 可以这个函数里面控制传送的条件
                    // 如果函数返回的是false将不再发送请求
                    return false
                }
            }) 
        }
    </script>
</body>
</html>